<template>
	<view class="container">
		<view class="action-view">
			<view @click="checkClick" class="button-primary">检查</view>
		</view>
		
		<view v-for="(group, gourpIndex) in list" :key="gourpIndex" class="group">
			<view class="group-item">
				<u-icon name="star-fill":size="18"></u-icon>
				<view class="name">{{group.name}}</view>
			</view>
			<view v-for="(item, index) in group.list" :key="item.targetId" class="target-item"
				:class="index === group.list.length-1 ? '':'divider-line'"
				@click="itemClick(item)">
				<view>{{item.name}}</view>
				<u-icon name="arrow-right" color="#A6A6A6" :size="18"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import XButton from '@/components/x-button.vue'
	import {
		getAppList
	} from '@/api/xj.js'
	export default {
		components: {
			XButton
		},
		data() {
			return {
				list: []
			}
		},
		onLoad(options) {
			console.log(options);
			this.getList();
		},
		methods: {
			getList() {
				getAppList().then(res => {
					console.log(res);
					this.list = res.data;
				})
			},
			
			checkClick() {
				this.$u.route({
					url: '/pages_operate/xj/xj-target-page'
				})
			},
			
			itemClick(item) {
				this.$u.route({
					url: '/pages_operate/xj/xj-check-list-page',
					params: item
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: $app-page-bg-color;
	}
	
	.container{
		padding-left: 40rpx;
		padding-right: 40rpx;
	}
	
	.group{
		display: flex;
		flex-direction: column;
		margin-top: 40rpx;
		
		.group-item{
			background-color: #FFFFFF;
			padding: 30rpx;
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.name{
				margin-left: 20rpx;
				color: $app-font-color;
				font-weight: bold;
				font-size: $app-font-size-md;
			}
		}
		
		.target-item{
			padding: 30rpx;
			background-color: #F0F0F0;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			color: $app-font-color;
			font-size: $app-font-size-sm;
			
		}
		.divider-line{
			border-bottom: 1px solid $app-divider-color;
		}
		
	}
	
	.action-view{
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		margin-top: 30rpx;
		
		.button-primary{
			width: 200rpx;
			height: 88rpx;
			background: linear-gradient(0deg, #F5AC3C 0%, #AACD22 100%);
			border-radius: 44rpx;
			
			display: flex;
			justify-content: center;
			align-items: center;
			
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	

</style>
